import React from 'react'
import '../../component/font/iconfont.css'
import './ZxComments.css'
import { Button, WingBlank } from 'antd-mobile';
import imgHeader from '../../Images/header.png'
import imgScore from '../../Images/2.jpg'
import ZxSoreDetail from '../../component/ZxSoreDetail/ZxSoreDetail'
import axios from 'axios'
import * as api from '../../utils/Zxapi'


class ZxComments extends React.Component{
    constructor(){
        super()
        this.state={
            // stars:5,
            // totalScore:4.8,
            // tasteScore:4.7,
            // packagScore:4.7,
            // vipComments:[
            //    {
            //     vipId:1,
            //     imgHeader:imgHeader,
            //     vipName:'张三',
            //     isVip:true,
            //     stars:3,
            //     scoreWords:'非常满意',
            //     scoreTime:'2020-11-11',
            //     scoreContent:'分量满满，味道非常好，配菜多，物美价廉，服务周到，会无限回购,分量满满，味道非常好，配菜多!',
            //     scoreImg:imgScore,
            //   }, 
            //   {
            //     vipId:2,
            //     imgHeader:imgHeader,
            //     vipName:'李四',
            //     isVip:false,
            //     stars:3,
            //     scoreWords:'非常满意',
            //     scoreTime:'2020-11-11',
            //     scoreContent:'分量满满，味道非常好，配菜多，物美价廉，服务周到，会无限回购,分量满满，味道非常好，配菜多!',
            //     scoreImg:imgScore,
            //   }, 
            //   {
            //     vipId:3,
            //     imgHeader:imgHeader,
            //     vipName:'王二',
            //     isVip:true,
            //     stars:3,
            //     scoreWords:'非常满意',
            //     scoreTime:'2020-11-11',
            //     scoreContent:'分量满满，味道非常好，配菜多，物美价廉，服务周到，会无限回购,味道非常好，配菜多，物美价廉，服务周到!',
            //     scoreImg:imgScore,
            //   }, 

            // ],
            /* 头部的评论数据 */
            HeadrScoreData:{},
            /* 用户评价的内容部分数据 */
            vipComments:[],
           /*  userScoreData:{} */
        }  
    }
    /* 点击箭头 ==返回店铺首页 */
    backMy(){
        this.props.history.push('/Home/MyStore')
     }
     /* 点击全部的时候===显示全部评论 */
    changeAll(){
      // console.log(123456);
      this.getuserScore()
    }
    /* 组件加载完成后 */
    componentDidMount(){
       this.getstoreHeadrScore()
       this.getuserScore()
    }
    /* 查询店铺的头部评价 */
    getstoreHeadrScore=()=>{
      axios({
        url:api.GET_STOPHEADERSORE,
        method:'get',
        params:{
          shop_phone:'1'
        }
      }).then(data=>{
        if(data.data.code==200){
           this.setState({
            HeadrScoreData:data.data.data
           })
        }
      }).catch(err=>{

      })
    }
    /* 查询对应商家的订单评价 */
    getuserScore=()=>{
      axios({
        url:api.GET_STOPUSERSORE,
        method:'get',
        params:{
          currentPage:'1',
          pageSize:'1',
          shop_phone:'1'
        }
      }).then(data=>{
        //  console.log(data)
         this.setState({
          vipComments:data.data.dataList
         })
        //  console.log(data.data.dataList)/* 是个数组 */
        //  data.data.dataList.map(item=>{
        //      return this.state.userScoreData=item
        //  })
        //  console.log(this.state.userScoreData)
      }).catch(err=>{

      })
    }
    /* 点击好评===查询所有好评==获取数据之后再次改变本组件state里面vipComments的值==重新渲染了页面 */
    changeAllgood(){
      axios({
        url:api.GET_STOPUSERSORE,
        method:'get',
        params:{
          currentPage:'1',
          good_evaluate:'1',
          pageSize:'1',
          shop_phone:'1'
        }
      }).then(data=>{
        this.setState({
          vipComments:data.data.dataList
         })
        //  console.log('=========')
        //  console.log(this.state.vipComments)
      }).catch(err=>{

      })
    }
    /*点击差评===查询所有差评==获取数据之后再次改变本组件state里面vipComments的值==重新渲染了页面  */
    changeAllbad(){
      axios({
        url:api.GET_STOPUSERSORE,
        method:'get',
        params:{
          currentPage:'1',
          bad_evaluate:'1',
          pageSize:'1',
          shop_phone:'1'
        }
      }).then(data=>{
        console.log(data)
        this.setState({
          vipComments:data.data.dataList
         })
         console.log('=========')
         console.log(this.state.vipComments)
      }).catch(err=>{

      })
    }
    /* 退出组件的时候需要要组件的数据移除 */
    componentWillUnmount(){
      this.getstoreHeadrScore=''
      this.getuserScore=''
    }
    render(){
        // let{stars,totalScore,tasteScore,packagScore,vipComments}=this.state
        let{HeadrScoreData,vipComments}=this.state
        /* 这里是循环的评价的星星个数 */
        let arr=[]
        for(let i=0;i<HeadrScoreData.shop_account_score;i++){
            arr.push(<span className='iconfont icon-pingfen1' key={i}></span>)
        }
        /* 循环===用户评价详情 */
        /* 用户的评价详情内容部分是引入的===ZxSoreDetail组件*/
        let vipScore=[]
        if(vipComments.length){
          vipScore=vipComments.map(item=>{
            if(item.vip=='会员'){
               return <ZxSoreDetail key={item.user_id} data={item}>
                <span className='iconfont icon-huiyuan2' id='viphuiyuan'></span>
                </ZxSoreDetail>
            }else{
                return  <ZxSoreDetail key={item.user_id} data={item}/>
            }
          })  
        }else{
            vipScore=<h2>暂无评论！</h2> 
        }
        return(
            <div className='comment'>
                <span className='iconfont icon-fanhuijian1' onClick={this.backMy.bind(this)}></span>
                <h3><span  className='iconfont icon-comment-w'></span>店铺评价</h3>
                 {/* 用户总评价==部分 */}
                 <div className='scoreHeaderBox'>
                    <div className='scoreLevel'>{HeadrScoreData.shop_account_score}</div>
                    <div className='scoreName'>
                        <p>商家评分</p>
                        <p>{arr}</p>
                    </div>
                    <div className='scoreTaste'>
                        <p>口味</p>
                        <p>{HeadrScoreData.shop_taste_score}</p>
                    </div>
                    <div className='scorePackag'>
                        <p>包装</p>
                        <p>{HeadrScoreData.shop_package_score}</p>
                    </div>
                 </div>
                 {/* 筛选按钮 */}
                 <div className='BtnSet'>
                  <Button type="primary" size="small"
                    onClick={this.changeAll.bind(this)}
                  inline style={{ marginRight: '4px' }}>全部</Button>
                  <Button type="ghost"  size="small" 
                    onClick={this.changeAllgood.bind(this)}
                  inline style={{ marginRight: '4px' }}>好评</Button>
                  <Button type="ghost"  size="small"
                   onClick={this.changeAllbad.bind(this)}
                  inline style={{ marginRight: '4px' }}>差评</Button>
                 </div>
                {vipScore}
            </div>
        )
    }
}
export default ZxComments